<template>
  <page-container duration="0" :show="commentBoxShow" @beforeleave="hide">
    <view class="comment-box" v-show="commentBoxShow" :class="isShow?'comment-box-show':''">
      <view class="comment-list" :class="isShow?'comment-list-show':''">
        <view class="comment-title" @click="hide">关闭</view>
        <scroll-view scroll-y lower-threshold="200" @scrolltolower="end" class="user-comment-list">
          <view class="user-comment-item">
            <view class="comment-user-info">
              <view class="user-image"><image :src="videoInfo.cateLogo"></image></view>
              <view class="user-username">{{videoInfo.cateName}}</view>
            </view>
            <view class="comment-text-box">
              <view class="comment-desc">{{videoInfo.title}}</view>
            </view>
          </view>
          <view class="user-comment-item" v-for="(item,index) in list" :key="item.id">
            <view class="comment-user-info">
              <view class="user-image"><image :src="item.avatar"></image></view>
              <view class="user-username">{{item.nickName || item.name}}</view>
            </view>
            <view class="comment-text-box">
              <view class="comment-desc"><text style="word-break: break-all;">{{item.content}}</text></view>
              <view class="comment-set">
                <view class="comment-date">{{item.fmtTime}}<text @click="delV(item,index)" v-if="item.isOwner===1" class="del">删除</text></view>
                <view class="comment-give-the-thumbs-up button-item-active" @click="like(item,index)">
                  <image v-if="item.isPraise===1" :src="image_hosts+'dianzan1.png'"></image>
                  <image v-else :src="image_hosts+'dianzan2.png'"></image>
                  <text>{{item.praiseNum>99?'99+':item.praiseNum}}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="user-comment-input user-comment-show">
        </view>
        <view :class="isShow?'user-comment-show':''" :style="bottomVal!==''?bottomVal:''" class="user-comment-input user-comment-input-fixed">
          <view class="textarea-box">
            <textarea :show-confirm-bar="false" maxlength="100000" :confirm-type="'send'" v-model="text" @keyboardheightchange="keyboardheightchange($event)" :adjust-position="false" placeholder="随便说两句..." auto-height ></textarea>
          </view>
          <view :style="text.length>0?'width: 120rpx;margin-left: 20rpx;':''" class="send" @click="sendMessage">发送</view>
        </view>
      </view>
    </view>
  </page-container>
</template>

<script>
export default {
  data() {
    return {
      image_hosts: this.image_host + 'quanzi/',
      bottomVal:"",
      text:"",
      isShow:false,
      commentBoxShow:false,
      videoInfo:{},
      FormData: {
        commentId:0,
        page:1,
        pageSize:10,
        videoId:0
      },
      total:0,
      list:[]
    };
  },
  methods: {
    /**
     * 显示评论窗口
     * @param item
     */
    show(item){
      this.videoInfo=item
      this.FormData.videoId=item.id
      this.FormData.page=1
      this.getList()
      this.commentBoxShow=true;
      this.$nextTick(()=>{
        this.isShow=true
      })
    },
    /**
     * 隐藏评论窗口
     */
    hide(){
      this.isShow=false
      setTimeout(()=>{
        this.commentBoxShow=false;
        this.$emit("commentHide",this.total)
      },300)
    },
    /**
     * 检测，虚拟键盘高度
     * @param e
     */
    keyboardheightchange(e){
      let height =e.detail.height
      if(height>0){
        this.bottomVal=`bottom: ${e.detail.height}px;`
      }else {
        this.bottomVal=""
      }
    },
    /**
     * 获取评论列表接口
     * @returns {Promise<void>}
     */
    async getList()
    {
      let data = this.FormData;
      let res = await this.$javaCircle.doRequest("post",'vs/video/comment/getList',data,'json')
      this.list=data.page===1?[].concat(res.data.data.list):this.list.concat(res.data.data.list)
      this.total=res.data.data.total;
    },
    /**
     *
     * @returns {Promise<void>} 发送评论消息
     */
    async sendMessage()
    {
      let data={
        commentId:0,
        content:this.text,
        videoId:this.videoInfo.id,
      }
      let res = await this.$javaCircle.doRequest("post",'vs/video/comment/saveComment',data,'json',true)
      if(res.data.code===0){
        uni.showToast({title:res.data.message,icon:"none"})
        this.text="";
        this.list=[res.data.data].concat(this.list)
        this.total++
      }

    },
    /**
     *
     * @param item 当前选择的数据
     * @param index 当前选择数据的下标
     * @returns {Promise<void>} 请求后端点赞，取消点赞接口
     */
    async like(item,index)
    {
      let data={
        commentId:item.id,
        videoId:item.videoId
      }
      let url = item.isPraise===1?'vs/video/comment/unPraiseComment':'vs/video/comment/praiseComment'
      let res = await this.$javaCircle.doRequest("post",url+'?commentId='+data.commentId+'&videoId='+data.videoId,{},'json')
      if(res.data.code!==0){
        uni.showToast({title:res.data.message,icon:"none"})
        return
      }
      this.list[index].praiseNum+=item.isPraise===1?-1:1
      this.list[index].isPraise=item.isPraise===1?0:1
    },
    /**
     * 提示是否删除评论
     * @param item
     * @param index
     */
    delV(item,index)
    {
      let _this=this;
      uni.showModal({
        title:"提示",
        content:"确定要删除这条评论吗？",
        success:function (e) {
          if(e.confirm){
            _this.del(item,index)
          }
        }
      })
    },
    /**
     * 删除评论
     * @param item
     * @param index
     * @returns {Promise<void>}
     */
    async del(item,index){
      let data={
        commentId:item.id,
        videoId:item.videoId
      }
      let url = 'vs/video/comment/delComment';
      let res = await this.$javaCircle.doRequest("post",url+'?commentId='+data.commentId+'&videoId='+data.videoId,{},'json')
      if(res.data.code!==0){
        if(res.data.code!==0){
          uni.showToast({title:res.data.message,icon:"none"})
          return
        }
      }
      this.list.splice(index,1)
      this.total--
    },
    end()
    {
      if(this.total>this.FormData.page*this.FormData.pageSize){
        this.FormData.page++;
        this.getList()
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.comment-box{
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0,0);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transition: all .3s linear;
}
.comment-box-show{
  background-color: rgba(0,0,0,.4);
}
.comment-list{
  width: 100%;
  height: 80%;
  background-color: #fff;
  border-radius: 20upx 20upx 0 0;
  position: absolute;
  bottom: -80%;
  left: 0;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  transition: all .3s cubic-bezier(1, -0.15, 1, 1);
  overflow: hidden;
}

.comment-list-show{
  bottom: 0;
}
.comment-title{
  width: 100%;
  height: 108upx;
  box-sizing: border-box;
  padding: 0 30upx;
  line-height: 108upx;
  font-size: 38upx;
  color: #666666;
  text-align: end;
  border-bottom: 1upx solid #D8D8D8;
}
.user-comment-list{
  flex: 1;
  overflow: auto;
}
.user-comment-input{
  width: 100%;
  min-height: 108upx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 25upx 30upx;
  align-items: center;
  border-top: 1upx solid #D8D8D8;
  display: none;
  transition: opacity .3s linear;
  opacity: 0;
}
.user-comment-show{
  display: flex;
  opacity: 1;
}
.user-comment-input .textarea-box{
  flex: 1;
  background-color: #F3F3F5;
  border-radius: 20upx;
  font-size: 38upx;
  box-sizing: border-box;
  padding: 25upx 30upx;
}
.user-comment-input .textarea-box textarea{
  width: 100%;
  font-size: 38upx;
}
.user-comment-item{
  box-sizing: border-box;
  padding: 25upx 30upx 0 30upx;

}
.comment-user-info{
  width: 100%;
  display: flex;
  align-items: center;
}
.user-image{
  width: 70upx;
  height: 70upx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20upx;
  background-color: #3F536E;
}
.user-image image{
  width: 100%;
  height: 100%;
}
.comment-text-box{
  box-sizing: border-box;
  margin-left: 90upx;
  border-bottom: 1upx solid #D8D8D8;
  padding-bottom: 30upx;
}
.comment-desc{
  width: 100%;
  box-sizing: border-box;
  font-size: 41upx;
  color: #333;
}
.comment-set{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16upx;
}
.comment-date{
  font-size: 32upx;
  color: #999999;
}
.comment-give-the-thumbs-up{
  display: flex;
  align-items: center;
}
.comment-give-the-thumbs-up image{
  width: 44upx;
  height: 52upx;
  margin-right: 8upx;
}
.user-comment-input-fixed{
  position: absolute;
  bottom: env(safe-area-inset-bottom);
  left: 0;
}
.send{
  width: 0%;
  height: 80upx;
  background-color: #61BD7F;
  line-height: 80upx;
  border-radius: 8upx;
  text-align: center;
  overflow: hidden;
  transition: all .3s linear;
  font-size: 32upx;
  color: #fff;
  margin-left: 0upx;
}
.del{
  color: red;
  margin-left: 30upx;
}
.user-username{
  font-size: 34upx;
  color: #666666;
}
</style>
